<template>
    <MenuView />

    <div class="contextContainer">
        <UserView />

        <div class="contextTable">
            <div class="searchContainer">
                <el-select class="selectOption" v-model="selectState" placeholder="选择订单状态" size="large" style="width: 240px">
                    <el-option v-for="item in stateOption" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <el-select class="selectOption" v-model="selectDate" placeholder="选择订单时间" size="large" style="width: 240px">
                    <el-option v-for="item in dateOption" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <el-button type="primary" :icon="Search" size="large" @click="getTableData()" plain>搜索</el-button>
                <el-button type="warning" :icon="Refresh" size="large" @click="refreshData()" plain>重置</el-button>
            </div>

            <div class="tableContainer">
                <el-table :data="tableData" style="width: 100%"
                    :header-cell-style="{ textAlign: 'center', backgroundColor: '#f0f8ff' }"
                    :cell-style="{ 'text-align': 'center', 'letter-spacing': '1px', 'font-weight': '600' }">
                    <el-table-column fixed prop="orderId" label="订单编号" width="240" />
                    <el-table-column prop="orderUser" label="订单客户" width="200" />
                    <el-table-column prop="foodImage" label="菜品图片" width="180">
                        <template #default="scope">
                            <img :src="scope.row.foodImage" alt="菜品图片" style="width:90%;height:auto;" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="foodName" label="菜品名称" width="150" />
                    <el-table-column prop="orderDate" label="订单时间" width="360" />
                    <el-table-column prop="orderState" label="订单状态" width="150" />
                    <el-table-column fixed="right" label="操作" min-width="120">
                        <template #default="scope">
                            <el-button v-if="scope.row.orderState === '支付成功'" type="success" :icon="Edit"
                                @click="editRow(scope.row)">订单完成</el-button>
                            <el-button v-else type="danger" :icon="Delete"
                                @click="deleteRow(scope.row)">订单删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>

    </div>

</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Edit, Delete, Search, Refresh } from '@element-plus/icons-vue'
import MenuView from '../components/MenuView.vue';
import UserView from '../components/UserView.vue';
import request from '../request/axios';
import { ElMessage } from 'element-plus';

let tableData = ref();
let selectState = ref();
let selectDate = ref();

const stateOption = [
  {
    value: '支付成功',
    label: '支付成功',
  },
  {
    value: '退款成功',
    label: '退款成功',
  },
  {
    value: '订货完成',
    label: '订单完成',
  },
];

const dateOption = [
  {
    value: '近三天',
    label: '近三天',
  },
  {
    value: '近一周',
    label: '近一周',
  },
  {
    value: '近一个月',
    label: '近一个月',
  },
];

const refreshData = () => {
    selectDate.value = null;
    selectState.value = null;
    getTableData();
};

const getTableData = () => {
    request.post("/order/manager/queryOrder", {
        orderDate: selectDate.value,
        orderState: selectState.value
    })
        .then((res) => {
            if (res.code === "200")
                tableData.value = res.data;
        });
};

const editRow = (row) => {
    request.post("/order/manager/updateState", {
        "orderId": row.orderId,
        "orderState": "订单完成"
    })
        .then((res) => {
            if (res.code === "200")
                ElMessage.success("订单状态修改成功");
            getTableData();
        });
};

const deleteRow = (row) => {
    request.post("/order/manager/deleteOrder", {
        "orderId": row.orderId,
    })
        .then((res) => {
            if (res.code === "200")
                ElMessage.error("订单删除成功");
            getTableData();
        });
}

onMounted(getTableData);
</script>

<style>
body,
#app {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    margin: 0%;
    padding: 0%;
}

.contextContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    height: 100%;
}

.contextTable {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 95%;
}

.searchContainer {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-inline: 5%;
    width: 90%;
    height: 10%;
}

.tableContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 90%;
}

.selectOption {
    margin-right: 2%;
}
</style>